<template>
  <div :class="$style.queue">
    <ContentWrap>
      <FormContainer :column="3">
        <el-form
          ref="query"
          :model="queryData"
          :rules="queryRules"
          label-width="70px"
        >
          <!-- <el-form-item prop="organization" label="分支机构">
            <el-select
              v-model="queryData.organization"
              clearable
              filterable
              placeholder="请选择分支机构"
            >
              <el-option
                v-for="(o, i) in orgList"
                :key="i"
                :value="o.groupNo"
                :label="o.groupName"
              />
            </el-select>
          </el-form-item> -->
          <el-form-item prop="skillid" label="技能组">
            <el-select
              v-model="queryData.skillid"
              clearable
              filterable
              placeholder="请选择技能组"
            >
              <el-option
                v-for="(g, i) in selectSkillList"
                :key="i"
                :value="g.id"
                :label="g.name"
              />
            </el-select>
          </el-form-item>
          <el-form-item>
            <Button type="primary" :loading="loading" enter @click="queryHandle">查询</Button>
          </el-form-item>
        </el-form>
      </FormContainer>
      <div>
        <Table :data="queueList" :filter-fun="filterFun">
          <el-table-column type="index" label="序号" />
          <el-table-column prop="caller" label="电话号码" />
          <el-table-column prop="callskill" label="技能组" />
          <!-- <el-table-column label="操作" align="right">
            <Button type="primary">sss</Button>
          </el-table-column> -->
        </Table>
      </div>
    </ContentWrap>
  </div>
</template>
<script>
import ContentWrap from '@/components/ContentWrap'
import FormContainer from '@/components/FormContainer'
import Table from './components/Table'
import { mapGetters } from 'vuex'
import { getBusinessAll } from '@/api/business'
export default {
  name: 'Queue',
  components: {
    ContentWrap,
    FormContainer,
    Table
  },
  data() {
    return {
      loading: false,
      queryData: {
        organization: '',
        skillid: ''
      },
      queryRules: {
        // organization: [{ required: true, message: '分支机构', trigger: 'change' }],
        skillid: [{ required: true, message: '技能组', trigger: 'change' }]
      },
      // 分支机构
      // orgList: [],
      queueList: []
    }
  },
  computed: {
    ...mapGetters(['skillList', 'agentid', 'agentState', 'skillInfoList']),
    sign() {
      return this.agentState.sign
    },
    selectSkillList() {
      return this.skillInfoList // 当前账户
      // return this.skillList // 华为平台
    }
  },
  created() {
    if (!this.sign && !this.$dev) {
      this.$router.push({ name: 'Index' })
      return
    }
    // this.getBusinessGroupAll()
  },
  methods: {
    queryHandle() {
      this.loading = true
      this.$refs.query.validate().then(() => {
        const skillName = this.getSkillName()
        return this.$cps.queryQueueInfo(this.queryData.skillid).then(res => {
          this.queueList = res.data.waitcallinfo.map(e => {
            e.callskill = skillName || e.callskill
            e.caller = this.$prefixTrim(e.caller)
            return e
          })
        }).catch(() => {
          this.$message.error('查询数据失败！')
        })
      }).finally(() => {
        this.loading = false
      })
    },
    // 获取组织
    getBusinessGroupAll() {
      getBusinessAll().then(res => {
        this.orgList = res.data
      })
    },
    // 过滤数据
    filterFun(data) {
      return data
    },
    // 获取技能名称
    getSkillName() {
      for (const s of this.selectSkillList) {
        if (s.id === this.queryData.skillid) {
          return s.name
        }
      }
      return undefined
    }
  }
}
</script>
<style lang='scss' module>
.queue{

}
</style>
